<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<nav th:fragment="navbar" class="navbar navbar-expand-lg navbar-dark bg-info">
    <div class="container-fluid">
        <a class="navbar-brand" href="/customer-service/dashboard">
            <i class="bi bi-headset"></i> 客服工作台
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/customer-service/dashboard">
                        <i class="bi bi-house"></i> 工作台
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/customer-service/conversations">
                        <i class="bi bi-chat-dots"></i> 对话管理
                        <span id="unreadBadge" class="badge bg-danger ms-1" style="display: none;">0</span>
                    </a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="bi bi-person-circle"></i> 客服中心
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="/customer-service/conversations">
                            <i class="bi bi-chat-left-text"></i> 客户对话</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="/login?logout">
                            <i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script>
    // 检查未读消息计数
    function checkUnreadMessages() {
        fetch('/customer-service/unread-count')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const badge = document.getElementById('unreadBadge');
                    if (data.unreadCount > 0) {
                        badge.textContent = data.unreadCount;
                        badge.style.display = 'inline';
                    } else {
                        badge.style.display = 'none';
                    }
                }
            })
            .catch(error => {
                console.error('检查未读消息失败:', error);
            });
    }
    
    // 页面加载时检查一次
    document.addEventListener('DOMContentLoaded', function() {
        checkUnreadMessages();
        
        // 每10秒检查一次未读消息
        setInterval(checkUnreadMessages, 10000);
    });
</script>
</body>
</html> 